{% extends "core-template.html" %}

{% block title %}
    <title>账户配置</title>
{% endblock %}

{% block body %}
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="fa-solid fa-house-user icon icon-origin"></i>我的账户
                            {% if account['isLogin'] %}
                                <button onclick="logout()" type="button" style="margin-bottom: 0.3em;"
                                        class="layui-btn layui-btn-xs layui-btn-normal">登出账户
                                </button>
                            {% endif %}
                        </div>
                        <div class="layui-card-body layui-col-space10"
                             style="margin: 0 auto;position: relative !important;overflow: auto;vertical-align: middle;">
                            {% if not account['isLogin'] %}
                                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                                    <legend>不登录云端</legend>
                                </fieldset>
                                <div>
                                    <form class="layui-form" action="/api/setting/account" method="post"
                                          lay-filter="">
                                        <input type="text" name="target" value="local.change_username" hidden>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">用户名</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="username" lay-verify="required"
                                                       autocomplete="off"
                                                       placeholder="输入用户名" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">昵称</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="nickname" lay-verify="required"
                                                       autocomplete="off"
                                                       placeholder="输入昵称" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">介绍</label>
                                            <div class="layui-input-block">
                                            <textarea type="text" name="description" lay-verify="required"
                                                      autocomplete="off"
                                                      placeholder="输入介绍" class="layui-textarea"></textarea>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block">
                                                <button class="layui-btn" lay-submit="" lay-filter="localLogin">
                                                    设置本地账户，不登录云端
                                                </button>
                                                <br><br>
                                                <p style="width: inherit;word-break:break-all;white-space: normal;">
                                                    PS:不支持自定义头像，头像来源：<a
                                                        href="https://twitter.com/mafumuffin/status/1508790676011753477">https://twitter.com/mafumuffin/status/1508790676011753477</a>
                                                </p>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                                    <legend>登录云端</legend>
                                </fieldset>
                                <div style="width: 216px; margin-left: 109px;">
                                    <button onclick="ysdmmxw_cloud_login()" type="button"
                                            class="layui-btn layui-btn-fluid">点击跳转至以赏的秘密小屋
                                    </button>
                                    <br><br>
                                </div>
                            {% else %}
                                <div class="layui-col-md12 layui-col-space15" style="vertical-align: middle;">
                                    <p style="text-align: center">
                                        <img src="{{ account['avatar'] }}"
                                             style="position: relative;width: 35%;vertical-align: middle;border-radius: 100%;border: solid 1px black;">
                                    <h3>用户名：{{ account['username'] }}</h3>
                                    <h3>昵称：{{ account['nickname'] }}</h3>
                                    <h3>个人描述：{{ account['description'] }}</h3>
                                    </p>
                                </div>
                            {% endif %}

                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="fa-solid fa-location-dot icon icon-origin"></i>Tab Toolbox for Website
                            的初始化文件配置
                        </div>
                        <div class="layui-card-body" style="position: relative;overflow: auto;">
                            <form class="layui-form" action="/api/setting/config" method="post" lay-filter="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">绑定IP地址</label>
                                    <div class="layui-input-block">
                                        <input id="host" type="text" name="host" lay-verify="required"
                                               autocomplete="off"
                                               class="layui-input" value="{{ host }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">绑定端口</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="port" lay-verify="required"
                                               autocomplete="off"
                                               class="layui-input" value="{{ port }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">开发模式</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="development" lay-skin="switch" lay-text="开启|关闭"
                                               lay-filter="switchTest"
                                               value="true" {{ "checked" if development else "" }}>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">调试模式</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="debug" lay-skin="switch" lay-text="开启|关闭"
                                               lay-filter="switchTest" value="true" {{ "checked" if debug else "" }}>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit="" lay-filter="config">
                                            设置新配置
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="fa-solid fa-user icon icon-blue"></i>设置管理密码
                        </div>
                        <div class="layui-card-body" style="position: relative;overflow: auto;">
                            <form class="layui-form" action="/api/setting/setAdminPassword" method="post" lay-filter="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">管理密码</label>
                                    <div class="layui-input-block">
                                        <input type="password" name="password" lay-verify="title"
                                               autocomplete="off"
                                               placeholder="输入密码（为空则取消设置）" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit="" lay-filter="adminPassword">
                                            设置管理密码
                                        </button>
                                    </div>

                                </div>

                            </form>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="fa-solid fa-earth-americas icon icon-tip"></i>Tab Toolbox for Website
                            的页面配置
                        </div>
                        <div class="layui-card-body" style="position: relative;overflow: auto;">
                            <form class="layui-form" action="/api/setting/website" method="post" lay-filter="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">网页标题</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="website_title" lay-verify="required"
                                               autocomplete="off"
                                               class="layui-input" value="{{ website_title }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">网页图标</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="website_icon" lay-verify="required"
                                               autocomplete="off"
                                               class="layui-input" value="{{ website_icon }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">logo标题</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="website_logo_title" lay-verify="required"
                                               autocomplete="off"
                                               class="layui-input" value="{{ website_logo_title }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">logo链接</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="website_logo" lay-verify="required"
                                               autocomplete="off"
                                               class="layui-input" value="{{ website_logo }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">页面关键字</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="website_keywords" lay-verify="required"
                                               autocomplete="off"
                                               class="layui-input" value="{{ website_keywords }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">页面描述</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="website_description" lay-verify="required"
                                               autocomplete="off"
                                               class="layui-input" value="{{ website_description }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">主页地址</label>
                                    <div class="layui-input-block">
                                        <input id="index_path_input" type="text" name="index_path"
                                               lay-verify="required"
                                               autocomplete="off"
                                               class="layui-input" value="{{ index_path }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">链接白名单</label>
                                    <div class="layui-input-block">
                                        <textarea id="public_path" name="public_path" placeholder="^/about$&#10;^/about/(.*)$"
                                                  class="layui-textarea">{{ public_path }}</textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit="" lay-filter="website">
                                            设置新配置
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function ysdmmxw_cloud_login() {
            window.open("https://lovepikachu.top/getcookie?callback=http://" + window.location.host + "/api/setting/account?target=cloud.login_ysdmmxw%26cookie=")

            document.addEventListener('visibilitychange', function () {
                // 用户打开或回到页面
                if (document.visibilityState === 'visible') {
                    parent.location.reload();
                }

            })
        }

        function logout() {
            layui.use(['jquery'], function () {
                var $ = layui.jquery;
                $.ajax({
                    url: "/api/setting/account",
                    type: "post",
                    data: {target: "logout"},
                    dataType: "json",
                    success: function (data) {
                        if (data['code'] === 0) {
                            layer.open({
                                type: 1,
                                title: '成功',
                                maxmin: true,
                                content: '<div style="padding: 15px;">' + data['msg'] + '</div>',
                                btn: ['刷新网页', '取消'],
                                yes: function () {
                                    parent.location.reload()
                                },
                                zIndex: layer.zIndex
                            });
                        } else {
                            layer.alert(data['msg'], {
                                title: '失败'
                            })
                        }
                    },
                    error: function (data) {
                        layer.alert("请求出现了异常，请稍后再试？", {
                            title: '提示'
                        })
                    },

                });
            })
        }

        layui.use(['form', 'layer'], function () {
            let form = layui.form,
                layer = layui.layer;

            form.on('submit', function (data) {
                layui.use(['jquery'], function () {
                    let $ = layui.jquery,
                        toast = layui.toast;
                    $.ajax({
                        url: data.form['action'],
                        type: "post",
                        data: data.field,
                        dataType: "json",
                        success: function (data) {
                            if (data['code'] === 0) {
                                layer.open({
                                    type: 1,
                                    title: '成功',
                                    content: '<div style="padding: 15px;">' + data['msg'] + '</div>',
                                    btn: ['刷新网页', '取消'],
                                    yes: function () {
                                        parent.location.reload()
                                    },
                                    zIndex: layer.zIndex
                                });
                            } else {
                                toast.error({title: '失败', message: data['msg'], position: 'topCenter'});
                            }
                        },
                        error: function (data) {
                            toast.error({title: '错误', message: "请求出现了异常，请稍后再试......", position: 'topCenter'});
                        },

                    });

                })

                return false;
            });
            document.getElementById("index_path_input").addEventListener("click", function () {
                layer.tips("此选项是主页框架地址（就是你当前看到的页面），若修改此选项那么你需要使用新地址访问此页面。", this);
            });

            document.getElementById("public_path").addEventListener("click", function () {
                layer.tips("此选项用于设置未验证管理员密码的访客运行访问的链接，会在程序一开始运行时设置。一行一个，允许正则表达式。", this);
            });

            document.getElementById("host").addEventListener("click", function () {
                layer.tips("不建议绑定在 0.0.0.0 上，这样可能会导致外网访问的风险，如果一定要绑定，请设置管理员密码。", this);
            });

        });


    </script>

{% endblock %}

